<html>
  <head>
    <title>Inine - ScrollPort Demos</title>
    <script src="../js/prototype.js" language="javascript" type="text/javascript"></script>
    <script src="../js/scriptaculous.js" language="javascript" type="text/javascript"></script>
    <script src="../scrollport.js" language="javascript" type="text/javascript"></script>

    <style>
      .scroll-viewport { text-align: left; overflow: hidden; }
      .page            { float: left; overflow: hidden; }
      
      #scrollport_1       { width: 450px; height: 300px; }
      #scrollport_1 .page { width: 450px; height: 300px; }

      .content-tile    { 
        background: url(img/rounded-150x150.gif);
        text-align: center; 
        font: 8pt sans-serif; 
        width: 150px; 
        height: 150px; 
        border: none;
      }

      #content_1 { background-color: #fff; }
      #content_2 { background-color: #afa; }
      #content_3 { background-color: #bbf; }
      #content_4 { background-color: #666; }
      #content_5 { background-color: #999; }
      #content_6 { background-color: #ccc; }
      
      #content_7 { background-color: #ff9; }
      #content_8 { background-color: #b0b; }
      #content_9 { background-color: #fa0; }
      #content_10 { background-color: #066; }
      #content_11 { background-color: #099; }
      #content_12 { background-color: #0cc; }
      
      #content_13 { background-color: #060; }
      #content_14 { background-color: #090; }
      #content_15 { background-color: #0c0; }
      #content_16 { background-color: #606; }
      #content_17 { background-color: #909; }
      #content_18 { background-color: #c0c; }

  
    </style>

  </head>
  
  <body>
  
    <p>Here is a demo of an ajax-less ScrollPort with "inline" data:</p>
    

    <div style="border: solid green 1px; background-color: #8f8">
      <center>
      <br />
      
      <div id="scrollport_1" class="scroll-viewport">

        <div class="page">
          <table width="450" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="150" valign="top">
                <div id="content_1" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 1
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_2" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 2
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_3" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 3
                </div>
              </td>  
            </tr>
            <tr>
              <td width="150" valign="top">
                <div id="content_4" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 4
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_5" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 5
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_6" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 6
                </div>
              </td>  
            </tr>
          </table>
        </div>
  
        <div class="page">
          <table width="450" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="150" valign="top">
                <div id="content_7" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 7
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_8" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 8
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_9" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 9
                </div>
              </td>  
            </tr>
            <tr>
              <td width="150" valign="top">
                <div id="content_10" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 10
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_11" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 11
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_12" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 12
                </div>
              </td>  
            </tr>
          </table>
        </div>

        <div class="page">
          <table width="450" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="150" valign="top">
                <div id="content_13" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 13
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_14" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 14
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_15" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 15
                </div>
              </td>  
            </tr>
            <tr>
              <td width="150" valign="top">
                <div id="content_16" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 16
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_17" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 17
                </div>
              </td>
              <td width="150" valign="top">
                <div id="content_18" class="content-tile">
                  <img src="img/demo-logo.gif" width="120" alt="" vspace="20" /><br />
                  Tile 18
                </div>
              </td>  
            </tr>
          </table>
        </div>

      </div>
      

      <br />
      
      <script>
        myScroller = new ScrollPort('scrollport_1', {
          tileWidth:  450,
          tileHeight: 300,
          showTiles:  1,
          duration: 1
        });
      </script>
      
      <span><a href="javascript:myScroller.PanLeft(); void 0">myScroller.PanLeft</a></span>
   
      &nbsp; &lt;&lt; || &gt;&gt; &nbsp;
      
      <span><a href="javascript:myScroller.PanRight(); void 0">myScroller.PanRight</a></span>

      </center>
      <br />
    </div>

    Now we just need a parallel effect that decreases the width of the first 
    cutter and moves the left margin of its slider the same amount.
    

    Then have the effect take an array of content divs and, on init, wraps them 
    in the necessary sliders and cutters...
  
  </body>
</html>
